<template>
    <div class="tableList">
        <el-table :data="tableData" border style="width: 100%;"
            :header-cell-style="{background:'#fafafa',color:'#000',fontWeight:400,fontSize:'12px'}"
            :cell-style="{color:'#5a5a5a',fontSize:'12px',fontWeight:400,padding:'5px 0'}" v-loading="loading"
            element-loading-text="加载中" element-loading-background="rgba(250, 250, 250, 0.5)"
            element-loading-spinner="el-icon-loading">
            <el-table-column label="序号" width="150" fixed>
                <template slot-scope="scope">
                    <span>{{(searchForm.page - 1) * (searchForm.limit) + scope.$index + 1}}</span>
                </template>
            </el-table-column>
            <el-table-column v-for="(item,index) in tableGroup" :key="index" :label="item.name" :min-width="item.width"
                show-overflow-tooltip>
                <template slot-scope="scope">
                    <span v-if="item.label == 'type'">{{enumType[scope.row[item.label]]}}</span>
                    <span v-else>{{labelComputed(scope.row)}}</span>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="180">
                <template slot-scope="scope">
                    <el-button type="text" size="small"
                        @click="edit(scope.row.id,scope.row.type,scope.row.prefix,scope.row.number,scope.row.time)">编辑
                    </el-button>
                </template>
            </el-table-column>
            <div slot="empty">
                <el-empty :image-size="100"></el-empty>
            </div>
        </el-table>
        <el-pagination v-if="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :page-sizes="[10,20,50,100]" :page-size="searchForm.limit" layout="total,prev, pager, next,sizes"
            :total="total" background>
        </el-pagination>
    </div>
</template>

<script>
    import {
        customNum
    } from '@/api/customFieldController'
    export default {
        data() {
            return {
                tableData: [],
                loading: false,
                total: 0,
                enumType:{
                    1:'销售订单',
                    3:'生产计划',
                    4:'工单',
                    5:'入库单',
                    6:'出库单',
                    7:'产品定义',
                    8:'不良品项',
                    9:'工序',
                    10:'工艺路线',
                    11:'装配工单'
                },
                enumTime:{
                    1:'年',
                    2:'年月',
                    3:'年月日'
                },
                enumScope:{
                    1:'0-9',
                    2:'00-99',
                    3:'000-999',
                    4:'0000-9999',
                    5:'00000-99999',
                    6:'000000-999999',
                    7:'0000000-9999999',
                    8:'00000000-99999999'
                },
                searchForm: {
                    page: 1,
                    limit: 10
                }
            }
        },
        props: {
            tableGroup: {
                type: Array,
                default: () => []
            },
        },
        computed:{
            labelComputed(){
                return label =>{
                    return `${label.prefix}+${this.enumTime[label.time]}+${this.enumScope[label.number]}`
                }
            }
        },
        mounted() {
            this.getCustomNum(this.searchForm)
        },
        methods: {
            //自定义编号规则
            getCustomNum(data) {
                this.loading = true
                customNum(data).then(res => {
                    if (res.code == 200) {
                        this.tableData = res.data.records
                        this.total = res.data.total
                    }
                    this.loading = false
                })
            },

            //编辑
            edit(id,type,prefix,number,time){
                let data = {
                    id,
                    type,
                    prefix,
                    number,
                    time
                }
                this.$emit('getMsg',data)
            },
            //pageSize 改变时会触发
            handleSizeChange(val) {
                this.searchForm.limit = val
                this.getCustomNum(this.searchForm)
            },
            //currentPage 改变时会触发
            handleCurrentChange(val) {
                this.searchForm.page = val
                this.getCustomNum(this.searchForm)
            },
        },
    }
</script>

<style lang="less" scoped>
    .tableList {
        padding: 0 20px;
    }
</style>